<template>
  <div class="mine">
    <img class="bg-pic" src="http://192.168.43.96:8080/static/images/mine.png" alt="">
    <div class="avatar">
      <img class="avatar-pic" src="http://192.168.43.96:8080/static/images/atavar.jpg" alt="">
    </div>
    <div class="text">我的活动 My Events</div>
  </div>
</template>
<script>
export default {
  
}
</script>
<style lang="less">
.mine{
  .bg-pic{
    width: 100%;
  }
  .avatar{
    width: 2rem;
    height: 2rem;
    border: 3px solid white;
    border-radius: 100%;
    position: absolute;
    top: 3rem;
    left: 7.6rem;
    .avatar-pic{
      width: 2rem;
      height: 2rem;
      border-radius: 100%;
    }
  }
  .text{
    width: 100%;
    height: 2rem;
    color: white;
    background: rgba(0, 0, 0, .2);
    line-height: 2rem;
    position: absolute;
    top: 6.5rem;
  }
}
</style>